<script setup name="Login">
import { ref, reactive  } from 'vue';
import OrderItem from "@/global/components/orderItem/OrderItem.vue";
import { onShow, onLoad } from '@dcloudio/uni-app'
import { useNoticeData } from './hooks/useNoticeData'
import { useHotOrderData } from './hooks/useHotOrderData'
const current = ref(0)
const { noticeList,getNotices } = useNoticeData()
const { orderList, getHotOrderList } = useHotOrderData()
const list1 = ref([
  {
    src: '/static/images/banner-001.png'
  },
  {
    src: '/static/images/banner-002.png'
  },
]);
const moduleList = reactive([
  {
    label: '代拿快递',
    typeId: 1,
    moduleIcon: '/static/images/delivery.png',
  },
  {
    label: '代取餐品',
    typeId: 2,
    moduleIcon: '/static/images/food.png',
  },
  {
    label: '代买零食',
    typeId: 3,
    moduleIcon: '/static/images/snack.png',
  },
  {
    label: '代送鲜花',
    typeId: 4,
    moduleIcon: '/static/images/flowers.png',
  },
])
const handleToOrder = () => uni.switchTab({ url: '/pages/orderEntry/orderEntry' })
const handleToCreateOrder = () => uni.navigateTo({ url: '/pages/createOrder/createOrder' })
const handleToReceive= () => uni.navigateTo({ url: '/pages/recevieOrder/recevieOrder' })
const handleToOrderDetail = ({ id }) => uni.navigateTo({ url: '/pages/order/orderDetail?id=' + id })
onShow(() => {
  getNotices()
  getHotOrderList()
})
const dotsStyles = {
  backgroundColor: '#ffffff',
  border: '1px rgba(83, 200, 249,0.3) solid',
  color: '#fff',
  selectedBackgroundColor: 'rgb(41, 121, 255)',
  selectedBorder: '1px rgb(41, 121, 255) solid'
}
</script>
<template>
  <view class="home-container">
    <uni-swiper-dot :info="list1" :dots-styles="dotsStyles" :current="current" mode="dot" field="content" >
      <swiper in autoplay  class="swiper-box" @change="(e) => current = e.detail.current">
        <swiper-item v-for="(item ,index) in list1" :key="index">
          <image class="swiper-image" :src="item.src" />
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
    <view class="notice-container">
      <up-notice-bar
          direction="column"
          fontSize="13"
          duration="5000"
          :text="noticeList"/>
    </view>
  </view>
  <view class="module-container">
    <blockquote class="module-item" @click="handleToCreateOrder" v-for="mudule in moduleList" :key="mudule.typeId">
      <up-image :src="mudule.moduleIcon" width="42px" height="42px"/>
      <text class="text">{{ mudule.label }}</text>
    </blockquote>
  </view>

  <view class="order-container">
    <view class="header">
      <view class="title">跑腿派单</view>
      <up-icon @click="handleToReceive" name="arrow-right" labelPos="left" label="更多" size="15" color="#999"></up-icon>
    </view>
  </view>
  <blockquote v-if="orderList.length">
    <order-item
        :refresh-data="getHotOrderList"
        :order="order"
        @click="() => handleToOrderDetail(order)"
        v-for="order in orderList"
        :key="order.id"
    />
  </blockquote>
  <blockquote class="btn-card" v-else>
    <uni-card >
      <up-empty icon-size="50" mode="order"  text="暂无派单" />
    </uni-card>
  </blockquote>
</template>
<style lang="scss" scoped>
uni-page-body {
  background-color: $u-primary-light;
  padding: 10rpx 20rpx 20rpx 20rpx;
  height: 100%;
}
.home-container {
    .swiper-image {
      width: 100% !important;
      height: 100% !important;
    }
}
.notice-container {
  padding: 30rpx 0;

  :deep(.u-notice__swiper) {
    height: 19px !important;
  }
}
.module-container {
  min-height: 150rpx;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  .module-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .text {
      margin-top: 15rpx;
      font-size: 30rpx;
    }
  }
}
.order-container {
  background-color: #fff;
  margin: 20rpx 0;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
  padding: 10px;
  .header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 30rpx;
      font-weight: bold;
      color: $u-primary;
    }
  }
}
.btn-card {
  width: 100%;
  height: 300rpx;
  .uni-card {
    height: 100%;
    width: 100%;
    line-height: unset !important;
    margin: unset !important;
    padding: unset !important;
    display: flex;
    align-items: center;
    justify-content: center;
    :deep(.u-empty__text) {
     color: $u-primary-dark !important;
      font-size: 25rpx !important;
      font-weight: bold;
      letter-spacing: 10rpx;
      margin-top: unset !important;
    }
    :deep(.uicon-empty-order) {
      color: $u-primary-dark !important;
    }
  }
}
</style>
